<template>
    <div class="home-banner relative h-96 md:h-[500px] overflow-hidden">
      <!-- 轮播内容 -->
      <Transition name="fade" mode="out-in">
        <div
          :key="currentIndex"
          class="absolute inset-0 bg-cover bg-center"
          :style="{ backgroundImage: `url(${banners[currentIndex]?.image})` }"
        >
          <div class="absolute inset-0 bg-gradient-to-r from-black/70 to-black/30">
            <div class="container-custom h-full flex items-center">
              <div class="max-w-2xl text-white">
                <h1 class="text-4xl md:text-6xl font-bold mb-4">
                  {{ banners[currentIndex]?.title }}
                </h1>
                <p class="text-lg md:text-xl mb-8 text-gray-200">
                  {{ banners[currentIndex]?.description }}
                </p>
                <div class="flex space-x-4">
                  <NuxtLink :to="banners[currentIndex]?.link" class="btn-primary text-lg">
                    立即探索
                  </NuxtLink>
                  <NuxtLink to="/docs" class="btn-outline bg-white/10 text-white border-white hover:bg-white/20 text-lg">
                    学习文档
                  </NuxtLink>
                </div>
              </div>
            </div>
          </div>
        </div>
      </Transition>
      
      <!-- 指示器 -->
      <div class="absolute bottom-8 left-1/2 -translate-x-1/2 flex space-x-2">
        <button
          v-for="(_, index) in banners"
          :key="index"
          :class="[
            'w-3 h-3 rounded-full transition-all',
            currentIndex === index ? 'bg-white w-8' : 'bg-white/50'
          ]"
          @click="currentIndex = index"
        />
      </div>
      
      <!-- 左右切换按钮 -->
      <button
        class="absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 bg-white/20 hover:bg-white/30 rounded-full backdrop-blur-sm transition-all"
        @click="prev"
      >
        <div class="i-mdi-chevron-left text-2xl text-white" />
      </button>
      <button
        class="absolute right-4 top-1/2 -translate-y-1/2 w-12 h-12 bg-white/20 hover:bg-white/30 rounded-full backdrop-blur-sm transition-all"
        @click="next"
      >
        <div class="i-mdi-chevron-right text-2xl text-white" />
      </button>
    </div>
  </template>
  
  <script setup lang="ts">
  const currentIndex = ref(0)
  
  const banners = [
    {
      title: '精选优质源代码项目',
      description: '1000+ 企业级项目源码，助力您的开发之路',
      image: '/images/banners/banner1.png',
      link: '/products',
    },
    {
      title: '系统化学习技术文档',
      description: '从入门到精通，完整的技术学习路径',
      image: '/images/banners/banner2.png',
      link: '/docs',
    },
    {
      title: '开通会员享更多特权',
      description: '海量资源免费下载，专属客服支持',
      image: '/images/banners/banner3.png',
      link: '/vip',
    },
  ]
  
  function next() {
    currentIndex.value = (currentIndex.value + 1) % banners.length
  }
  
  function prev() {
    currentIndex.value = (currentIndex.value - 1 + banners.length) % banners.length
  }
  
  // 自动轮播
  let timer: NodeJS.Timeout
  onMounted(() => {
    timer = setInterval(next, 5000)
  })
  
  onUnmounted(() => {
    clearInterval(timer)
  })
  </script>